<template>
  <!-- 内容区域 -->
  <div class="devicesdetails">
    <el-card shadow="never" style="height: 255px; margin-bottom: 10px">
      <!-- 按钮 -->
      <div class="add_btn_top">
        <el-button
          type="primary"
          icon="el-icon-edit-outline"
          size="mini"
          @click="openEdit"
          >编辑</el-button
        >
        <el-button
          v-permission="[2, 'button']"
          icon="el-icon-delete"
          size="mini"
          @click="deleteBtn"
          >删除</el-button
        >
        <el-button icon="el-icon-close" size="mini" @click="closePage"
          >关闭</el-button
        >
        <edit-device
          :editdevice="editdevice"
          :device-token="deviceToken"
          @changeShow="changeShow"
        />
      </div>

      <!-- 内容 -->
      <div class="flex-x" style="">
        <Details
          :detail="deviceData"
          :qr-code="qrCode"
          :name-obj="{ label: '设备名称' }"
        >
          <div slot="description" style="display: flex; align-items: center">
            <span> 设备类型： </span>
            <div class="description">
              <el-link
                type="primary"
                :underline="false"
                @click="todevicesTypedetails(deviceData.deviceType.token)"
                ><u>{{ deviceData.deviceType.name }}</u>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="打开设备类型"
                  placement="right-end"
                >
                  <svg-icon class="icon" icon-class="select" />
                </el-tooltip>
              </el-link>
            </div>
          </div>
        </Details>
        <el-table
          :row-style="{ height: '35px' }"
          :header-row-style="{ height: '36px' }"
          :header-cell-style="{ padding: '5px' }"
          :cell-style="{ padding: '0' }"
          :data="deviceData.deviceAccounts"
          border
          stripe
          style="width: 100%; margin-right: 30px"
          max-height="220px"
        >
          <el-table-column
            label="序号"
            width="70"
            type="index"
            align="center"
          />
          <el-table-column prop="accuracy" label="炉温精度" align="center" />
          <el-table-column
            prop="temperatureUpper"
            label="温度区间上界"
            align="center"
          />
          <el-table-column
            prop="temperatureLower"
            label="温度区间下界"
            align="center"
          />
          <el-table-column prop="offset" label="死区/补偿值" align="center" />
        </el-table>
      </div>

      <!-- 大二维码 -->
      <div v-show="qrCodeShow" class="box" data-box-arrow="top">
        <img :src="qrCode" class="qrCode" />
        <div class="qrCode-details">扫码查看详情</div>
      </div>

      <!-- 二维码 -->
      <img :src="qrCode" />
    </el-card>

    <div class="details_bottom">
      <!-- 实时数据按钮 -->
      <div v-if="btnShow" class="buttonStyle">
        <span class="data_iocn" @click="paramFilterClick">
          <svg-icon
            :icon-class="attributeSelectName != '' ? 'params_select' : 'params'"
            style="margin-right: 10px"
          />
          <span v-if="attributeSelects.length == 0" class="params_tip"
            >请选择关注的参数</span
          >
          <span v-if="attributeSelects.length > 0" class="params_attr">{{
            attributeSelectName
          }}</span>
          <i
            class="el-icon-arrow-down"
            style="margin: 0 14px 0 3px; color: #cccccc"
          />
        </span>
        <el-divider direction="vertical" class="top-divider" />
        <span class="data_iocn">
          <svg-icon
            :icon-class="dataBtn == 1 ? 'detail_select' : 'detail'"
            @click="detailClick"
          />
        </span>
        <span class="data_iocn">
          <svg-icon
            :icon-class="dataBtn == 2 ? 'browse_select' : 'browse'"
            @click="browseClick"
          />
        </span>
        <span class="data_iocn">
          <svg-icon
            :icon-class="dataBtn == 3 ? 'expand_select' : 'expand'"
            @click="expandClick"
          />
        </span>
        <span class="data_iocn">
          <svg-icon
            :icon-class="dataBtn == 4 ? 'time_select' : 'time'"
            @click="timeClick"
          />
        </span>
        <!-- checkbox下拉框 -->
        <div v-show="boxShow" class="checkboxStyle">
          <div class="position">
            <el-row>
              <el-checkbox-group
                v-model="attributeSelects"
                class="messageGroup"
                @change="attributeChange"
              >
                <el-col
                  v-for="attribute in filterAttributes"
                  :key="attribute.token"
                  :span="8"
                  class="colStyle"
                >
                  <el-checkbox
                    :label="attribute.token + ':' + attribute.name"
                    style="color: #666666"
                    >{{ attribute.name }}</el-checkbox
                  >
                </el-col>
              </el-checkbox-group>
            </el-row>
          </div>
          <div class="bottom">
            <div class="bottom-btn">
              <el-button size="mini" @click="cancelBtn">取消</el-button>
              <el-button type="primary" size="mini" @click="submitBtn"
                >确定</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane label="分配历史" name="first" class="tabPaneHeight">
          <device-assignments-history
            :key="activeName"
            ref="deviceAssignmentsHistory"
            v-init-screen-h
            :device-token="deviceToken"
            :page-num="pageNum"
            :page-size="pageSize"
            @setPageToatl="setPageToatl"
          />
        </el-tab-pane>
        <el-tab-pane label="实时数据" name="second" class="tabPaneHeight">
          <div class="real_time_box">
            <deviceRunTimeData
              v-if="dataBtn == 1"
              :key="activeName"
              ref="deviceRunTimeData"
              v-init-screen-h="10"
              :device-token="deviceToken"
              :device-type-token="deviceTypeToken"
            />
            <device-run-time-data-list
              v-if="dataBtn == 2"
              ref="deviceRunTimeDataList"
              v-init-screen-h
              :device-token="deviceToken"
              :device-type-token="deviceTypeToken"
              :page-num="pageNum"
              :page-size="pageSize"
              @setPageToatl="setPageToatl"
            />
            <device-run-time-data-history
              v-if="dataBtn == 4"
              ref="deviceRunTimeDataHistory"
              :device-type-token="deviceTypeToken"
              :device-active-assignments-token="deviceActiveAssignmentsToken"
              :page-num="pageNum"
              :page-size="pageSize"
              @setPageToatl="setPageToatl"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane name="third" label="工艺配方" class="tabPaneHeight">
          <formulaTable
            :key="activeName"
            ref="formRef"
            v-permission="[4, 'list']"
            :device-token="deviceToken"
          />
        </el-tab-pane>
        <el-tab-pane name="command" label="命令" class="tabPaneHeight">
          <commandTable
            :key="activeName"
            ref="commandRef"
            v-permission="[18, 'list']"
            :device-type-token="deviceTypeToken"
            :device-token="deviceToken"
          />
        </el-tab-pane>
      </el-tabs>

      <Pagination
        v-if="pageShow"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :page-sizes.sync="pageSizes"
        @pagination="pagination"
      />
    </div>
  </div>
</template>

<script>
import textCopy from "../../common/textCopy.js";
import { closeTab } from "../../common/js/tab-comm.js";
import { formatTime } from "@/views/common/js/utils.js";
import deviceAssignmentsHistory from "./deviceAssignmentsHistory.vue";
import deviceRunTimeData from "./deviceRunTimeData.vue";
import deviceRunTimeDataList from "./deviceRunTimeDataList.vue";
import deviceRunTimeDataHistory from "./deviceRunTimeDataHistory.vue";
import formulaTable from "./formulaTable.vue";
import commandTable from "./commandTable.vue";
import Pagination from "@/views/common/page";
import EditDevice from "./editDevice";
import QrCodeImg from "@/components/QrCodeImg";
import Details from "./Details";
import { getDeviceLists, delDevice } from "@/api/device";
import { getDeviceTypeAttributes } from "@/api/deviceType";
export default {
  components: {
    commandTable,
    formulaTable,
    Details,
    deviceAssignmentsHistory,
    deviceRunTimeData,
    deviceRunTimeDataList,
    deviceRunTimeDataHistory,
    Pagination,
    EditDevice,
    QrCodeImg
  },
  data() {
    return {
      accountTable: [],
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      pageShow: true,
      qrCodeShow: false,
      editdevice: false,
      btnShow: false,
      boxShow: false,
      dataBtn: 1,
      qrCode: "",
      activeName: "first",
      deviceToken: this.$route.query.deviceToken,
      deviceTypeToken: "",
      deviceActiveAssignmentsToken: "",
      deviceData: {
        deviceType: "",
        deviceAccounts: []
      },
      assignmentsDatas: [],
      activeAssignment: "",
      deviceAttributes: [],
      filterAttributes: [],
      attributeSelects: [],
      attributeSelectTokens: [],
      attributeSelectName: ""
    };
  },
  mounted() {
    this.getDeviceByToken();
    this.$nextTick(() => {
      this.$refs.deviceAssignmentsHistory.init();
    });
  },
  methods: {
    formatDateT(date) {
      return formatTime(date);
    },
    // 复制
    Copytext() {
      textCopy.copy();
    },
    mouseOver() {
      this.qrCodeShow = true;
    },
    mouseLeave() {
      this.qrCodeShow = false;
    },
    // 关闭页面
    closePage() {
      closeTab(this.$route.fullPath, "devices");
    },
    // 打开编辑弹窗
    openEdit() {
      this.editdevice = true;
    },
    toLink(token) {
      // this.$router.go(0);
      this.$router.push({
        path: "/_empty",
        query: {
          data: JSON.stringify({ deviceToken: token }),
          path: "devicesdetails"
        }
      });
    },
    // 弹窗回调
    changeShow(data) {
      this.editdevice = false;
      if (data.isRefresh) {
        this.deviceToken = data.deviceToken;
        this.toLink(data.deviceToken);
        // this.$router.push({
        //   path: "devicesdetails",
        //   query: { deviceToken: data.deviceToken },
        // });
        // this.getDeviceByToken();
      }
    },
    // 跳转到设备类型详情
    todevicesTypedetails(deviceTypetoken) {
      this.$router.push({
        path: "/devicetypedetails",
        query: { deviceTypeToken: deviceTypetoken }
      });
    },

    // 获取设备详情
    getDeviceByToken() {
      var that = this;
      var param = { includeAssignment: true, includeDeviceType: true };
      getDeviceLists(param, `/${that.deviceToken}`).then(res => {
        const r = res.data;
        that.deviceData = r;
        that.deviceData.imageUrl = r.deviceType.imageUrl;
        console.log("r :>> ", that.deviceData.deviceAccounts);
        that.deviceTypeToken = r.deviceType.token;
        that.deviceActiveAssignmentsToken = r.activeDeviceAssignments
          ? r.activeDeviceAssignments[0].token
          : "";
      });
    },
    // 删除
    deleteBtn() {
      var that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delDevice(this.deviceToken).then(res => {
          this.$msg({
            type: "success",
            message: "删除成功!"
          });
          this.closePage();
        });
      });
    },
    // 分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      if (this.activeName == "first") {
        this.$nextTick(() => {
          this.$refs.deviceAssignmentsHistory.init();
        });
      } else {
        if (this.dataBtn == 2) {
          // 实时数据概览视图
          this.$nextTick(() => {
            this.$refs.deviceRunTimeDataList.init();
          });
        } else if (this.dataBtn == 4) {
          this.$nextTick(() => {
            this.$refs.deviceRunTimeDataHistory.getDeviceRunTimeData();
          });
        }
      }
    },
    // 回调设置total
    setPageToatl(total) {
      this.total = total;
    },

    // 切换实时数据
    tabChange() {
      this.pageNum = 1;
      if (this.activeName == "second") {
        this.pageShow = false;
        this.btnShow = true;
        this.dataBtn = 1;
        this.$nextTick(() => {
          this.$refs.deviceRunTimeData.init();
        });
        this.getDeviceRunTimeFilterData();
      } else if (this.activeName == "first") {
        this.btnShow = false;
        this.pageShow = true;
        this.$nextTick(() => {
          this.$refs.deviceAssignmentsHistory.init();
        });
        // third command
      } else if (this.activeName == "third") {
        this.pageShow = false;
        this.btnShow = false;
        this.$nextTick(() => {
          this.$refs.formRef.init();
        });
      } else if (this.activeName == "command") {
        this.pageShow = false;
        this.btnShow = false;
        this.$nextTick(() => {
          this.$refs.commandRef.init();
        });
      }
    },

    // 筛选参数列表
    getDeviceRunTimeFilterData() {
      var params = {
        page: 1,
        pageSize: 0
      };
      getDeviceTypeAttributes(params, this.deviceTypeToken).then(res => {
        this.filterAttributes = res.data.results;
      });
    },
    // 筛选参数
    paramFilterClick() {
      if (this.boxShow == false) {
        this.boxShow = true;
      } else {
        this.boxShow = false;
      }
    },
    // 参数改变触发
    attributeChange(data) {
      this.attributeSelectTokens = [];
      this.attributeSelectName = "";
      data.forEach(v => {
        this.attributeSelectTokens.push(v.split(":")[0]);
        if (this.attributeSelectName) {
          this.attributeSelectName =
            this.attributeSelectName + "; " + v.split(":")[1];
        } else {
          this.attributeSelectName = v.split(":")[1];
        }
      });
    },
    cancelBtn() {
      this.boxShow = false;
    },
    // 参数筛选提交
    submitBtn() {
      if (this.dataBtn == 1) {
        this.$refs.deviceRunTimeData.attributeSelectTokens = this.attributeSelectTokens;
        this.$refs.deviceRunTimeData.handleParamsFilter();
      } else if (this.dataBtn == 2) {
        this.$refs.deviceRunTimeDataList.attributeSelectTokens = this.attributeSelectTokens;
        this.$refs.deviceRunTimeDataList.handleParamsFilter();
      } else if (this.dataBtn == 4) {
        this.$refs.deviceRunTimeDataHistory.attributeSelectTokens = this.attributeSelectTokens;
        this.$refs.deviceRunTimeDataHistory.handleParamsFilter();
      }
      this.boxShow = false;
    },
    // 详情视图
    detailClick() {
      this.pageShow = false;
      if (this.dataBtn != 1) {
        this.dataBtn = 1;
        this.$nextTick(() => {
          this.$refs.deviceRunTimeData.attributeSelectTokens = this.attributeSelectTokens;
          this.$refs.deviceRunTimeData.init();
        });
      }
    },
    // 概览视图
    browseClick() {
      this.pageShow = true;
      if (this.dataBtn != 2) {
        this.dataBtn = 2;
        this.$nextTick(() => {
          this.$refs.deviceRunTimeDataList.attributeSelectTokens = this.attributeSelectTokens;
          this.$refs.deviceRunTimeDataList.init();
        });
      }
    },
    // 跳转大屏
    expandClick() {
      this.$router.push({
        path: "deviceRunTimeLargeData",
        query: { deviceToken: this.deviceToken }
      });
    },
    // 历史数据
    timeClick() {
      this.pageShow = true;
      if (this.dataBtn != 4) {
        this.dataBtn = 4;
        this.$nextTick(() => {
          this.$refs.deviceRunTimeDataHistory.attributeSelectTokens = this.attributeSelectTokens;
          this.$refs.deviceRunTimeDataHistory.init();
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/style/deviceCss/commonStyle.css";
@import "../../../assets/style/deviceCss/attributeStyle.css";
.devicesdetails /deep/ .el-button--primary {
  /* background-color: #2680d2; */
  /* border-color: #2680d2; */
}
.devicesdetails {
}
.details_bottom {
  background-color: #fff;
  margin-top: 10px;
  /* padding-bottom: 15px; */
  position: relative;
  /deep/ .el-tabs__header {
    margin-bottom: 0;
  }
  /deep/ .el-tabs__nav-wrap {
    padding-left: 20px;
  }
}
.deviceDetailsImg {
  width: 206px;
  height: 206px;
  position: absolute;
  margin: 24px 0 0 24px;
  transition: all 0.6s;
}
.deviceDetailsImg:hover {
  transform: scale(1.1);
}
.deviceDetailsToken {
  position: absolute;
  left: 283px;
  top: 66px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.deviceDetailsName {
  position: absolute;
  left: 283px;
  top: 103px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.deviceDetailsType {
  position: absolute;
  left: 283px;
  top: 142px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.explain-text {
  width: 366px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: -15px;
  margin-left: 40px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.deviceDetailsCreated {
  position: absolute;
  left: 856px;
  top: 66px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.deviceDetailsUpdated {
  position: absolute;
  left: 856px;
  top: 103px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.code-img {
  width: 29px;
  height: 29px;
  margin-left: 6px;
}
.box {
  position: absolute;
  top: 135px;
  left: 890px;
  display: inline-block;
  margin: 40px;
  width: 230px;
  height: 165px;
  padding: 20px;
  -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #bbb;
  z-index: 9999;
}
.box[data-box-arrow]:before,
.box[data-box-arrow]:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  border-color: transparent;
}
.box[data-box-arrow="top"]:before,
.box[data-box-arrow="top"]:after {
  bottom: 100%;
  left: 10px;
}
.box[data-box-arrow="top"]:before {
  border-bottom-color: #bbb;
}
.box[data-box-arrow="top"]:after {
  border-bottom-color: #fff;
  margin-bottom: -1px;
}
.qrCode {
  width: 140px;
  height: 140px;
  margin-top: -20px;
  margin-left: 23px;
}
.qrCode-details {
  margin-left: 52px;
  margin-top: -5px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}
.view-details {
  position: absolute;
  left: 856px;
  top: 134px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.el-main {
  background-color: #fff;
  padding: 0px;
}
.text {
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
.site-img {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
}
.site-content {
  float: left;
  margin-top: 21px;
  margin-left: 25px;
}
.icon {
  margin-left: 16px;
}
.top-button {
  position: absolute;
  right: 0;
  top: -38px;
}
.customHeight {
  height: calc(100vh - 150px - 247px - 50px) !important;
}
.real_time_box {
}
.buttonStyle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99;
}
</style>
